<template>
    <!-- <div ref="iframeCnt" class="com-cnt"></div> -->
    <div class="com-cnt">
        <div class="head clearfix" :style='mypagebg'>
            <button id="logout" class="logout">退出</button>
            <div class="user">
                <div class="user_head">
                    <img :src="photo" alt="" class='zu' @click="direct('userinfo')" style="width:100%;height:100%;">
                </div>
                    <div class="user_box">
                        <input readonly="readonly " class="user_name" :value="list" />
                        <img :src="gg" alt="" class="gg">
                        <!-- <div class="uesr_title" :style='title' v-show="isvip === 0&&vipType === 1">vip会员</div>
                    <div class="uesr_title1" :style='title' v-show="isvip === 0&&vipType === 0">普通会员</div> -->
                        <div class="uesr_title" :style='title' v-show="isvip === 0"></div>
                    </div>
                    <div class="uesr_shiming" :class='uthenticationStatus==3?"hadshiming":"notshiming"' v-show="uthenticationStatus==3"></div>
                    <div class="uesr_shiming" :class='uthenticationStatus==3?"hadshiming":"notshiming"' v-show="uthenticationStatus==2" @click="touserinfo"></div>
                </div>
                <ul> 
                    <!-- <li>
                    <div class="qi">固额</div>
                    <p class="money">{{item.ge}}元</p>
                </li> -->
                    <li class="clearfix" @click="direct('balanceMange')">
                        <p class="money fr">{{item.ye}}</p>
                        <p class="qi fr">余额：</p>
                    </li>
                    <li class="clearfix" @click="direct('integralMange')" v-if="isvip === 0">

                        <p class="money fr">{{item.jf}}</p>
                        <p class="qi fr">积分：</p>
                    </li>
                    <li class="clearfix" @click="cantclick()" v-else>
                        <p class="money fr">{{item.jf}}</p>
                        <p class="qi fr">积分：</p>
                    </li>
                </ul>
            </div>
            <!-- <div class="imgs" @click="direct('yqhy')">
                <img src="../../assets/imgs/my/vip.png" alt="">
            </div> -->
            <div class="tab">
                <div class="goods">
                    <div class="title">我的商品订单</div>
                    <div class="detal clearfix" @click="direct('scdd','1')">
                        <p class="fl">您的订单详情都在这呢</p>
                        <p class="fr">
                            <img src="../../assets/imgs/my/right.png" alt=""/>
                                </p>
                            <p class="fr">查看订单所有</p>
                    </div>
                    <div class="list">
                        <ul class="clearfix">
                            <li class="fl" @click="direct('scdd','2')">
                                <img src="../../assets/imgs/my/good-a.png" alt="">
                                <p>待付款</p>
                            </li>
                            <li class="fl" @click="direct('scdd','3')">
                                <img src="../../assets/imgs/my/good-b.png" alt="">
                                <p>待发货</p>
                            </li>
                            <li class="fl" @click="direct('scdd','4')">
                                <img src="../../assets/imgs/my/good-c.png" alt="">
                                <p>待收货</p>
                            </li>
                            <li class="fl" style="position:relative" @click="direct('afterSail')">
                                <img src="../../assets/imgs/my/good-d.png" alt="">
                                <p>退款/售后</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="goods">
                    <div class="title">我的旅游订单</div>
                    <div class="detal clearfix" @click="gotoTourListDtl('-1')">
                        <p class="fl">您的订单详情都在这呢</p>
                        <p class="fr">
                            <img src="../../assets/imgs/my/right.png" alt=""/>
                                </p>
                            <p class="fr">查看订单所有</p>
                    </div>
                    <div class="list">
                        <ul class="clearfix">
                            <li class="fl" @click="gotoTourListDtl('0')">
                                <img src="../../assets/imgs/my/tour-a.png" alt="">
                                <p>待付款</p>
                            </li>
                            <li class="fl" @click="gotoTourListDtl('1')">
                                <img src="../../assets/imgs/my/tour-b.png" alt="">
                                <p>待出行</p>
                            </li>
                            <li class="fl" @click="gotoTourListDtl('2')">
                                <img src="../../assets/imgs/my/tour-c.png" alt="">
                                <p>已出行</p>
                            </li>
                            <li class="fl" @click="direct('saleApply')">
                                <img src="../../assets/imgs/my/tour-d.png" alt="">
                                <p>退款/售后</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="biao">
                <ul class="list">
                    <li @click="direct('userinfo')">
                        <img src="../../assets/imgs/my/item-a.png" alt="" class="tx">
                        <span class="bt">个人中心</span>
                        <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                    </li>
                    <li @click="isclick()">
                        <img src="../../assets/imgs/my/item-b.png" alt="" class="tx">
                        <span class="bt">会员中心</span>
                        <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                    </li>
                    <!-- <li @click="direct('scdd')">
                            <img :src="scdd" alt="" class="tx">
                            <span class="bt">有机农鲜订单</span>
                            <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                        </li>
                        <li @click="direct('lybmjl')">
                            <img :src="bm" alt="" class="tx">
                            <span class="bt">旅游报名订单</span>
                            <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                        </li> -->
                    <li @click="direct('yqhy')">
                        <img src="../../assets/imgs/my/item-e.png" alt="" class="tx">
                        <span class="bt">邀请好友</span>
                        <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                    </li>
                    <li @click="direct('help')">
                        <img src="../../assets/imgs/my/item-f.png" alt="" class="tx">
                        <span class="bt">帮助与客服</span>
                        <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                    </li>
                    <li @click="direct('setUp')">
                        <img src="../../assets/imgs/my/item-g.png" alt="" class="tx">
                        <span class="bt">设置</span>
                        <span class="tz"><img src="../../assets/imgs/my/right.png" alt=""></span>
                    </li>

                </ul>
            </div>
        </div>

</template>

<script>
import { domain } from '@/assets/js/config'
import iconCom from '@/common/icon/selecticon.vue'
import $ from 'jquery'
import http from "@/assets/js/axios"
import Qs from 'qs'
import axios from 'axios'
import { maskTips } from '@/assets/js/dom'
import { Toast } from 'mint-ui';
export default {
    name: 'centerPage',
    components: {

    },
    data() {
        return {
            item: {},
            list: [],
            isvip: '',
            vipType: '',
            uthenticationStatus: '',
            photo: '',
            mypagebg: {
                backgroundImage: "url(" + require("../../assets/imgs/my/bg.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% auto"
            },
            title: {
                backgroundImage: "",
                backgroundSize: '100% 100%',
                backgroundRepeat: "no-repeat",
            },
            user_img: require('../../assets/imgs/my/zu.png'),
            gg: require('../../assets/imgs/my/gg.png'),
            grzx: require('../../assets/imgs/my/grzx.png'),
            hyzx: require('../../assets/imgs/my/hyzx.png'),
            scdd: require('../../assets/imgs/my/scdd.png'),
            mbc: require('../../assets/imgs/my/mbc.png'),
            gwc: require('../../assets/imgs/my/gwc.png'),
            bm: require('../../assets/imgs/my/bm.png'),
            yq: require('../../assets/imgs/my/yq.png'),
            jk: require('../../assets/imgs/my/jkzx.png'),
        }
    },
    mounted() {
        var that = this
        //页面入口检测登录
        var userToken = localStorage.getItem("token") || '' //用户token值
        if (!userToken) {
            console.log('没有token')
            that.$router.push('/login')

        } else {
            that.asyncUserInfo(userToken)
            getuserinfo(userToken)
        }

        $('#logout').bind('click', function () {
            localStorage.setItem('token', '')
            console.log(localStorage.getItem("token"))
            that.$router.push('/login')
        })

        $('.an button').click(function () {
            var self = $(this);
            self.addClass('active').siblings().removeClass('active');
        });

        //展示固额余额积分
        console.log(userToken)
        $.ajax({
            url: domain + "/xshk/f/assets/query?token=" + userToken,
            data: {},
            type: "post",
            dataType: "json",
            xhrFields: { withCredentials: true },
            crossDomain: true,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (data) {
                console.log(data)
                if (data.code === 0) {
                    that.item = {
                        ge: data.data.fixedAssets,
                        ye: data.data.accountBalance,
                        jf: data.data.canPoint,
                    }
                } else {
                    console.log("数据为空");

                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("通信失败");
                /*弹出jqXHR对象的信息*/
                console.log(jqXHR.responseText);
                console.log(jqXHR.status);
                console.log(jqXHR.readyState);
                console.log(jqXHR.statusText);
                /*弹出其他两个参数的信息*/
                console.log(textStatus);
                console.log(errorThrown);
            }
        })

        function getuserinfo(userToken) {
            $.ajax({
                url: domain + "/xshk/f/home/info?token=" + userToken,
                type: "post",
                dataType: "json",
                xhrFields: { withCredentials: true },
                crossDomain: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function (data) {
                    console.log(data)
                    if (data) {
                        if (data.code == -5) {
                            maskTips({ id: 'login-timeout', txt: data.message })
                            that.$router.push('/login')
                        } else if (data.code === 0) {
                            that.isvip = data.data.isVIP
                            that.list = data.data.nickName
                            that.photo = data.data.photo
                            that.vipType = data.data.vipType
                            localStorage.setItem('phone',data.data.mobile)
                            console.log(that.list)
                            if (1 <= that.vipType && that.vipType <= 6) {
                                console.log(that.vipType)
                                that.title.backgroundImage = "url(" + require("@/assets/imgs/my/vip" + that.vipType + ".png") + ")"
                            }

                            //展示头像和积分
                            var headphoto = data.data.photo
                            //把实名认证状态存进localstorage
                            localStorage.setItem('uthenticationStatus', data.data.uthenticationStatus)
                            that.uthenticationStatus = data.data.uthenticationStatus
                            //var userScore = data.data.userScore
                            console.log(headphoto)
                            $('#headimg').css('background-image', 'url(' + headphoto + ')')
                            //$('#userScore').text(userScore)
                        } else {
                            maskTips({ id: 'loginxhr-fail', txt: data.message })
                        }
                    } else {
                        console.log("数据为空");
                    }
                },
                error: function () {
                    console.log("登录失败");
                }

            })
        }
        $('.gg').click(function () {
            $('.user_name').removeAttr('readonly');
            $('.user_name').css('background', '#fff')
        });
        // // 更改用户名
        $('.user_name').blur(function () {
            var userToken = localStorage.getItem("token") || '' //用户token值
            var name = $('.user_name').val();
            $(".user_name").css('background', 'transparent');
            $(".user_name").attr('readonly', 'readonly');
            $.ajax({
                url: domain + "/xshk/f/home/updateInfo?token=" + userToken,
                data: { 'nickName': name },
                type: "post",
                dataType: "json",
                xhrFields: { withCredentials: true },
                crossDomain: true,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function (data) {
                    console.log(data)
                },
                error: function (err) {
                    console.log(err);
                }

            });

        });

    },
    methods: {
        isclick: function () {
            var that = this
            if (this.isvip == 0) {
                this.$router.push('/memberCenter')
            } else {
                Toast({ message: '你还不是会员，请前去申请成为会员', duration: 2000 });
                setTimeout(function () {
                    that.$router.push('/exprecharge')
                }, 1000);

            }
        },
        cantclick: function () {
            console.log(456)
            maskTips({ id: 'cantclick', txt: '您还不是会员' })
        },
        direct: function (val, param) {
            this.$router.push({ path: "/" + val, query: { status: param } });
        },
        alertPlease: function () {
            maskTips({ id: 'just-alert', txt: '敬请期待' })
        },
        touserinfo: function () {
            this.$router.push('/userinfo')
        },
        asyncUserInfo: function (token) {
            axios({
                url: domain + '/xshk/f/home/synchUserInfo?token=' + token,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify({mobile:that.phone})
            }).then(res => { }).catch(err => { console.log(err) })
        },
        gotoTourListDtl: function (pid) {
            this.$router.push({ path: '/tourList', query: { 'id': pid } })
            // Toast({ message: res.data.message, duration: 1000 })
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
    padding: 0;
    background: #F0F0F0;
    overflow-y: auto;

    .head {
        height: 4.7rem;
        width: 100%;

        // background: url('../img/bg.png') no-repeat 0 0;
        // margin-top: .92rem
        .logout {
            border: none;
            outline: none;
            font-size: 0.24rem;
            float: right;
            font-family: 'PingFang-SC-Medium';
            background: #8cb337;
            color: #fff;
            margin-top: 0.2rem;
            margin-right: 0.1rem;
        }

        .user {
            width: 100%;
            height: 1rem;
            margin: 0.74rem auto;
            float: left;
            position: relative;

            .user_head {
                width: 1.2rem;
                height: 1.2rem;
                margin: 0 0.36rem;
                border: 3px solid #fff;
                border-radius: 100%;
                overflow: hidden;
                position: relative;
                float: left;

                .zu {
                    float: left;
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .user_box {
                width: auto;
                height: 100%;
                float: left;
                position: relative;

                .user_name {
                    font-family: 'PingFangSC-Regular';
                    color: #333;
                    float: left;
                    margin-top: 10px;
                    background: transparent;
                    font-size: 16px;
                    width: 70%;
                }

                .gg {
                    float: left;
                    margin-top: 0.3rem;
                }

                .uesr_title {
                    width: 80px;
                    height: 26px;
                    position: absolute;
                    top: 0.8rem;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                }

                .uesr_title1 {
                    width: 1.4rem;
                    height: 0.4rem;
                    border-radius: 10px;
                    background: #9000ff;
                    font-size: 0.24rem;
                    font-family: 'PingFangSC-Regular';
                    color: #fff;
                    position: absolute;
                    top: 0.8rem;
                    /* text-align: right; */
                    padding-left: 26px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                }
            }

            .uesr_shiming {
                width: 71px;
                height: 20px;
                position: absolute;
                bottom: -50px;
                left: 12px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }

            .hadshiming {
                background: url('../../assets/imgs/my/hadshiming.png');
                background-size: 100% 100%;
            }

            .notshiming {
                background: url('../../assets/imgs/my/notshiming.png');
                background-size: 100% 100%;
            }
        }

        ul {
            float: right;
            width: 100%;
            height: 1rem;
            padding: 0 20px;
            box-sizing: border-box;
            text-align: right;

            li {
                height: 50%;
                line-height: 50%;
                text-align: center;

                p {
                    font-size: 0.27rem;
                    font-family: 'PingFangSC-Regular';
                    color: #999;
                    margin: 0 auto;
                }
            }
        }
    }

    div.imgs {
        width: 100%;
        height: 135px;
        background-color: #fff;
        text-align: center;

        img {
            width: 345px;
            height: 100%;
        }
    }

    div.tab {
        background-color: #fff;
        width: 100%;
        padding: 15px 15px;

        div.goods {
            padding: 10px 0;

            div.title {
                font-size: 18px;
                font-family: MicrosoftYaHei;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
            }

            div.detal {
                margin-top: 10px;
                font-size: 14px;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);

                p:nth-child(1) {
                    text-align: left;
                }

                p:nth-child(2) {
                    margin-left: 10px;

                    img {
                        width: 7px;
                        height: 12px;
                    }
                }
            }

            div.list {
                margin-top: 10px;

                ul {
                    width: 100%;

                    li {
                        width: 25%;
                        height: 60px;
                        font-size: 12px;
                        font-family: MicrosoftYaHei;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                        text-align: center;

                        img {
                            width: 34px;
                            height: 34px;
                        }
                    }
                }
            }
        }
    }

    .biao {
        background: #fff;
        width: 100%;
        height: auto;
        padding: 0 0.3rem;
        box-sizing: border-box;
        margin-bottom: 15px;

        .list {
            width: 100%;
            height: 100%;

            li {
                width: 100%;
                height: 0.93rem;
                border-bottom: 1px solid #f3f3f3;
                font-size: 0.27rem;
                color: #666;
                font-family: 'PingFangSC-Regular';

                .tx {
                    float: left;
                    margin-top: 7px;
                    width: 34px;
                    height: 34px;
                }

                .bt {
                    float: left;
                    line-height: 0.93rem;
                }

                .tz {
                    float: right;
                    line-height: 0.93rem;
                    margin-right: 0.1rem;

                    img {
                        width: 7px;
                        height: 15px;
                    }
                }
            }
        }
    }
}
</style>
